import React,{Suspense} from 'react'
import {
    Route,
    Routes,
    BrowserRouter,
    Navigate
} from "react-router-dom";
import routes from "./RouterConfig"
import {RouterTypes} from "../types/router.d"

export default function RouterView() {
    const renderRoute=(routes:RouterTypes[])=>{
        return routes.map((item,index)=>{
            return <Route key={index} path={item.path} element={item.to?<Navigate to={item.to} /> :<item.component />}>
                {
                    item.children&&renderRoute(item.children)
                }
            </Route>
        })
    }
    return (
        <BrowserRouter>
        <Suspense fallback={<div>路由加载中</div>}>
            <Routes>
                {
                    renderRoute(routes)
                }
            </Routes>
        </Suspense>
        </BrowserRouter>
    )
}
